<template>
  <ContainerWrapper
    :designer="designer"
    :widget="widget"
    :parent-widget="parentWidget"
    :parent-list="parentList"
    :index-of-parent-list="indexOfParentList"
  >
    <a-row :key="widget.id" :gutter="widget.options.gutter" class="grid-container" :class="[selected ? 'selected' : '', customClass]">
      <template v-for="(colWidget, colIdx) in widget.cols" :key="colWidget.id">
        <!-- <grid-col-widget :widget="colWidget" :designer="designer" :parent-list="widget.cols"
                         :index-of-parent-list="colIdx" :parent-widget="widget"
                         :col-height="widget.options.colHeight"></grid-col-widget> -->
      </template>
    </a-row>
  </ContainerWrapper>
</template>

<script lang="ts" setup name="grid-widget">
  import { ref, PropType, computed } from "vue"
  import ContainerWrapper from "./ContainerWrapper.vue"
  const customClass = ref()
  import type { Designer } from "../../type"
  const props = defineProps({
    widget: { type: Object, default: {}, required: true },
    parentWidget: { type: Object as PropType<any[]>, required: true },
    parentList: { type: Array, required: true },
    indexOfParentList: { type: Number, required: true },
    designer: { type: Object as PropType<Designer>, required: true },
  })
  const designer = props.designer

  const selected = computed(() => props.widget.id === designer.selectedId)
</script>

<style lang="less" scoped></style>
